<template>
    <div class="px-4 py-3 h-fit flex flex-col rounded-2xl bg-white hover:bg-[#FFF8FA] cursor-pointer transition-colors">
        <!-- 角色卡片的上半部分 包含角色头像和名称和角色的能力标签 -->
        <div class="flex">
            <!-- 角色头像和名称 -->
            <div class="flex-1 flex items-center">
                <img :src="avatar"
                    class="w-12 h-12 rounded-full mr-3">
                <div class="text-lg font-semibold">{{ nickname }}</div>
            </div>

            <!-- 角色的能力标签渲染 -->
            <div class="flex gap-2">
                <div v-for="(label, index) in capabilityLabels" :key="index"
                    class="h-fit rounded-sm text-xs px-4 py-1 text-[#555555]"
                    :style="{ backgroundColor: label.color }">
                    {{ label.code }}
                </div>
            </div>
        </div>

        <!-- 角色卡片的下半部分 包含角色的描述 -->
        <div class="text-sm mt-5 text-[#727272] line-clamp-2">
            {{ introduction }}
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    nickname: {
        type: String,
        default: ''
    },
    avatar: {
        type: String,
        default: ''
    },
    introduction: {
        type: String,
        default: ''
    },
    capabilityLabels: {
        type: Array,
        default: () => []
    }
})

</script>
